<template>
	<view class="home ">
		<u-navbar  title="" back-text="房侦探" :is-back="true"  :background="{ background: '#000' }" :back-text-style="{color:'#FFF'}" back-icon-color="#000"> </u-navbar>
		<homeHead />
		<view class="home-nav line">
			<view class="nav1" @click="toPage('/pages/publish/index?id=0')"></view>
			<view class="nav-right">
				<view class="nav2" @click="toPage('/pages/search/search?type=1')"></view>
				<view class="nav3" @click="toPage('/pages/search/search?type=2')"></view>
			</view>
		</view>
		<view class="flex list-title-line">
			<view class="title"> 二手共盘房源 </view>
			<view class="cc"> >> </view>
		</view>
		<div class="main">

			<view class="list">
				<view class="item flex" v-for="(item,index) in list " :key="index">
					<view class="item-img home-list-img"> </view>
					<view class="infos">
						<view class="title"> {{ item.propertyName   }}</view> 
						<view class="attr"> {{ item.ztSpace.insideArea||'-'}} m | {{ item.ztSpace.room||'-'}}房
							{{ item.ztSpace.parlor||'-'}}厅 | 桂林山水</view>
						<view class="number">
							<view class="bg-number"> {{ item.ztPrice.totalPrice||'-'}}万 </view>
							<view class="size-number"> {{ item.ztPrice.unitPrice||'-'}}元/m</view>
						</view>
					</view>
					<view class="icons"> </view>
				</view>

				 
				 

			</view>


		</div>
		<tabBar />
	</view>
</template>

<script>
	import mixins from '@/common/mixin.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				list:[
					 {
						propertyName: '嘻嘻嘻嘻嘻嘻嘻',
						ztSpace: {
							insideArea: 11,
							room: 2,
							parlor: 3
						},
						ztPrice: {
							totalPrice: 110,
							unitPrice: 23
						}
					}
				]
			}
		},
		created() {},
		methods: {
			async change() {
				var res = await this.ajax('/wx/property/list')
				this.list.concat(res.rows)
				console.log("公共list=", res);   
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #FFF;
	}

	.home {
		//visibility: hidden;
		display: flex;
		flex-direction: column;
		padding: 0 0vw;

		.home-nav {
			display: flex;
			padding: 10px 10px 0 10px;
		}

		.nav-right {
			margin-left: 10px;
		}

		.nav1 {
			width: 150px;
			height: 128px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav1.png) center center / 100% 100%;
		}

		.nav2 {
			width: 200px;
			height: 60px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav2.png) center center / 100% 100%;
		}

		.nav3 {
			width: 200px;
			height: 60px;
			margin-top: 10px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav3.png) center center / 100% 100%;
		}

		/* 开始list */
		.list-title-line {
			padding: 10px 20PX;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 16px;
			}

			.cc {
				color: #CCC;
			}
		}

		.list {
			padding: 0px 20PX;
            .item{
				margin-bottom: 30px;
			}
			.home-list-img {
				width: 160px;
				height: 120px;
			}

			.infos {
				margin-left: 10px;
			}

			.title {
				color: #000;
				font-size: 14PX;
				font-weight: 600;
			}

			.attr {
				color: #ccc;
			}

			.number {
				display: flex;
				align-items: flex-end;
			}

			.bg-number {
				font-size: 18PX;
				font-weight: 600;
			}

			.size-number {
				color: #ccc;
				margin-left: 10px;
			}

			.icons {
				width: 40px;
				height: 60px;
			}
		}
	}
</style>
